<template>
  <div class="json-data-container">
    <div ref="editorContainer" class="editor-container"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import * as monaco from 'monaco-editor'
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { storeToRefs } from 'pinia'

const props = defineProps({
  data: {
    type: String,
    required: true
  }
})

watch(
  () => props.data,
  (newVal) => {
    initData(newVal)
  }
)
const editorContainer = ref<any>(null)
let editor = null as any

const globalStyleStore = useStyleStore()
const { codeEditorStyle } = storeToRefs(globalStyleStore)

onMounted(() => {
  monaco.editor.defineTheme('my-dark-theme', {
    base: 'vs-dark',
    inherit: true,
    rules: codeEditorStyle.value.rules,
    colors: codeEditorStyle.value.colors
  })
  editor = monaco.editor.create(editorContainer.value, {
    value: '',
    language: 'json',
    theme: 'my-dark-theme',
    automaticLayout: true
  })

  initData(props.data)
})

const initData = (type: string) => {
  if (type === 'canvas') {
    const canvasData = window.api.handleCanvasData('getCanvas', 'resourceMana', false, [])
    console.log(canvasData)
    editor.setValue(JSON.stringify(canvasData, null, 2))
  }
}
</script>

<style scoped lang="scss">
.json-data-container {
  width: 100%;
  height: calc(100% - 30px);

  .editor-container {
    width: 100%;
    height: 100%;
  }
}
</style>
